<script lang="ts" setup>
import type {
  WorkbenchProjectItem,
  WorkbenchQuickNavItem,
} from '@vben/common-ui';

import { ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  WorkbenchHeader,
  WorkbenchQuickNav,
  WorkbenchTrends,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';

import { getPage as getGoodsPage } from '#/api/product/goods-spu';

const userStore = useUserStore();

// 同样，这里的 url 也可以使用以 http 开头的外部链接
const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ion:home-outline',
    title: '首页',
    url: '/',
  },
  {
    color: '#bf0c2c',
    icon: 'ion:grid-outline',
    title: '仪表盘',
    url: '/dashboard',
  },
  {
    color: '#e18525',
    icon: 'ep:goods',
    title: '商品管理',
    url: '/product/goods/spu',
  },
  {
    color: '#3fb27f',
    icon: 'ion:md-reorder',
    title: '订单管理',
    url: '/order/order-info',
  },
  {
    color: '#4daf1bc9',
    icon: 'ion:md-reorder',
    title: '售后单管理',
    url: '/order/order-refund',
  },
  {
    color: '#00d8ff',
    icon: 'ion:color-palette-outline',
    title: '首页装修',
    url: '/theme/home',
  },
];

const trendItems = ref<any[]>([]);

const router = useRouter();

// 这是一个示例方法，实际项目中需要根据实际情况进行调整
// This is a sample method, adjust according to the actual project requirements
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
  if (nav.url?.startsWith('http')) {
    openWindow(nav.url);
    return;
  }
  if (nav.url?.startsWith('/')) {
    router.push(nav.url).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
}
const getGoodsTop10 = () => {
  getGoodsPage({
    size: 10,
    current: 1,
    desc: 'sales_volume',
    status: '1',
    verifyStatus: '1',
  }).then((res) => {
    trendItems.value = res.records;
  });
};
getGoodsTop10();
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        早安, {{ userStore.userInfo?.username }}, 开始您一天的工作吧！
      </template>
      <!-- <template #description> 今日晴，20℃ - 32℃！ </template> -->
    </WorkbenchHeader>

    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-3/5">
        <WorkbenchTrends :items="trendItems" title="商品TOP10" />
      </div>
      <div class="w-full lg:w-2/5">
        <WorkbenchQuickNav
          :items="quickNavItems"
          class="mt-5 lg:mt-0"
          title="快捷导航"
          @click="navTo"
        />
      </div>
    </div>
  </div>
</template>
